<template>
	<view style="padding: 0 20px;">
		<!-- 表单 -->
		<u-form :model="form" ref="uForm" > 
			<!-- 输入标题 -->
			<u-form-item label="标题:" prop="title"><u-input v-model="form.title" type="text" border="true" clearable/></u-form-item>
			<!-- 重要等级 -->
			<u-form-item label-width="150rpx" label="重要等级:" prop="radio">
				<u-radio-group v-model="form.radio">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value" :disabled="item.disabled">
						{{ item.grade }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<!-- 选择用户 -->
			<u-form-item label-width="150rpx" label="选择用户:" prop="users">
				<u-input v-model="form.users" @focus="chooseUser" border="true" clearable/>
			</u-form-item>
			<!-- 选择时间 -->
			<u-form-item label-width="150rpx" label="发布时间:" prop="time">
				<u-picker v-model="show" mode="time" :params="params" @confirm = "confirmTime"></u-picker>
				<u-input v-model="form.time" @click="show = true" border="true" clearable/>
			</u-form-item>
			<!-- 输入内容 -->
			<u-form-item label="内容:" prop="content"><u-input v-model="form.content" type="textarea" border="true" height="200" auto-height="true" clearable="false"/></u-form-item>
			<!-- 确定取消按钮 -->
			<view class="yes-or-no">
				<!-- 取消 -->
				<u-button size="medium" @click="cancel">取消</u-button> 
				<!-- 确定 -->
				<u-button size="medium" type="success" @click="submit">确定</u-button> 
			</view>
		</u-form>
		<u-modal v-model="user_show" @confirm="confirm" show-cancel-button="true" title="请选择用户" >
					<view class="slot-content" :style="{'height': phoneHeight + 'px'}">
						<view class="content" >
							<view class="contentLeft" style="width: 50%;">
								<view class="" style="text-align: center; font-size: 16px;">
									部门
								</view>
								<view class="departmentList">
									<scroll-view scroll-y="true" style="height:90%; margin-top: 20px;">
										<ly-tree
									 	:tree-data="departmentList" 
									 	node-key="id" 
									 	:props="defaultProps" 
									 	@node-click="handleNodeClick" 
									 />
									</scroll-view>
								</view>
								
							</view>
							<view class="contentRight" style="width: 50%; ">
								<view class=""style="text-align: center; font-size: 16px;">
									用户姓名
								</view>
								<view class="usersList">
									<scroll-view scroll-y="true" style="height:90%; margin-top: 20px;">
										<u-checkbox-group @change="checkboxGroupChange" wrap="true">
											<u-checkbox 
												@change="checkboxChange" 
												v-model="item.checked" 
												v-for="(item, index) in userlist" :key="index" 
												:name="item.realname"
											>{{item.realname}}</u-checkbox>
										</u-checkbox-group>
									</scroll-view>
								</view> 
							</view>
						</view>
					</view>
				</u-modal>
		<!-- 选择信息接收人列表 -->
		<!--  -->
		
	</view>
</template>

<script>
	import newsAdd from '../../api/newsAdd.js'
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: {
		        LyTree
		    },
		data() {
			return {
				//默认重要等级
				form:{
					title:'',
					radio:'1',
					users:'',
					time:'',
					content:''
				},
				//重要等级列表
				radioList: [
					{
						grade: '一般',
						disabled: false,
						value:'1'
					},
					{
						grade: '重要',
						disabled: false,
						value:'2'
					},
					{
						grade: '紧急',
						disabled: false,
						value:'3'
					}
				],
				//选择时间组件配置
				params:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					// 选择时间的时间戳
					timestamp: true,
				},
				show: false,//选择时间组件是否显示
				user_show:false,//是否显示 信息接收人列表
				phoneHeight:'',//屏幕高度
				//部门列表
				departmentList: [],//部门列表
				//部门列表配置
				defaultProps: {
					children: 'children',
					label: 'title'
				},
				//用户列表
				userlist: [
					// {
					// 	realname: '全选',
					// 	checked: false,
						
					// }
				],
				//用户id暂存表
				userId:[],
				//存放用户名称
				userArray:[],
				//发送用户id
				sendUser:[],
				//发送用户的账号
				userAccount:'',
				rules: {
					users: [
						{
							required: true, 
							message: '请选择用户', 
							trigger: ['change']
						}
					],
					content: [
						{
							required: true, 
							message: '请输入信息内容',
							trigger: ['change','blur']
						}
					]
				}
			}
		},
		onReady() {
			//表单验证
			this.$refs.uForm.setRules(this.rules);
			//调用默认时间转换函数
			this.getNowFormatDate ()
			//计算屏幕高度
			var _this = this;
			uni.getSystemInfo({
			    success(res) {
					_this.phoneHeight = res.windowHeight-res.windowHeight*0.3;
				}
			})
		},
		   
		methods: {
			//获取部门信息
			chooseUser(){
				this.user_show = true;
				newsAdd.queryTreeList({
					'X-Access-Token': this.$store.state.token
				}).then(res =>{
					console.log(res)
					this.departmentList = res.data.result
					 console.log(this.departmentList)
				}).catch(err =>{
					console.log(err)
				})
				
			},
			//表单验证 提交表单
			submit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						const { title,radio,users,time,content} = this.form
						console.log(title,radio,users,time,content)
						newsAdd.addNews({
							'X-Access-Token': this.$store.state.token
						},{
							'content':content,'radio':radio,'title':title,'createTime':time,'userAccount':this.userAccount,'xySysReplyMessageList':this.sendUser
						}).then(res =>{
							this.$Router.back(1,{
							    success:(...arg)=>{
							        console.log(arg)
							    }
							})
							console.log(res)
						}).catch(err =>{
							console.log(err)
						})
						console.log("成功")
					}else{
						console.log("失败")
					}
				})
			},
			//取消发信息，返回上一页
			cancel(){
				this.$Router.push('/pages/newsIndex/newsIndex')
			},
			//返回选中用户的值
			checkboxGroupChange(e) {
				if(e[0]=='全选'){
					e.splice(0,1)
				}
				// console.log(e);
			},
			//复选按钮事件
			checkboxChange(e) {
				if(e.name == '全选' && e.value == true){
					this.checkedAll()	
					
				}else if(e.name == '全选' && e.value == false){
					this.nocheckedAll()
				}
			},
			//全选
			checkedAll() {
				this.userlist.map(val => {
					val.checked = true;
				})
			},
			//取消全选
			nocheckedAll() {
				this.userlist.map(val => {
					val.checked = false;
				})
			},
			//树形组件方法
			handleNodeClick(obj) {
				console.log('handleNodeClick', obj);
						//获取部门成员
						newsAdd.queryRoleList({
							'X-Access-Token': this.$store.state.token
						},{
							'id':obj.data.id
						}).then(res =>{
							// console.log(res)
							//循环添加属性
							for (let i = 0; i < res.data.result.length; i++) {
							   this.$set(res.data.result[i], "checked", false);
							}
							res.data.result.unshift({realname: '全选',checked: false})
							this.userlist = res.data.result
							//匹配已选用户,修改checked
							let userlist = this.userlist
							let userId = this.userId
							for(let i=0;i<=userlist.length;i++){
								for(let j=0;j<userId.length;j++){
									if(userlist[i].id == userId[j]){
										userlist[i].checked = true
									}
								}
							}
							console.log(this.userlist)
						}).catch(err =>{
							console.log(err)
						})
				// 	}
			},
			//模态框确认按钮
			confirm(){
				let userAccount = []
				this.userId = []
				this.userArray = []
				for(let i=1;i<this.userlist.length;i++){
					if(this.userlist[i].checked == true){
						//将用户账号放进数组
						userAccount.push(this.userlist[i].username)
						//将id放进数组
						this.userId.push(this.userlist[i].id)
						//将id对应的用户名称放进数组
						this.userArray.push(this.userlist[i].realname)
					}
				}
				for(let i=0;i<this.userId.length;i++){
					let userobj={userId:this.userId[i]}
					this.sendUser.push(userobj)
				}
				this.form.users = this.userArray.join(' ')
				this.userAccount = userAccount.join(',')
				console.log(this.sendUser)
				// console.log(this.userAccount)
				// console.log(this.userId)
				// console.log(this.userArray)
				
			},
			handleNodeExpand(obj) {
				console.log('handleNodeExpand', JSON.stringify(obj));
			},
			//选择发送时间
			confirmTime(time){
				console.log(time);
				this.form.time = time.year+"-"+time.month+"-"+time.day;
			},
			//设置默认时间和时间转换
			getNowFormatDate () {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear(); 
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				this.form.time = currentdate
			}
		}
	}
</script>

<style lang="scss" scoped>

	.yes-or-no{
		margin-top: 30px;
		display: flex;
		justify-content: space-around;
	}
	.content {
		display: flex;
		width: 100%;
		height: 100%;
		padding:0px 0px 30px ;
		overflow: hidden;
	}
	.contentLeft{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 100%;
	}
	.contentRight{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		// padding-left: 20px;
		height: 100%;
	}
	.departmentList{
		height: 90%;
		overflow: hidden;
	}
	.usersList{
		height: 90%;
		overflow: hidden;
	}
</style>